<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>bootstrap</title>
    <head th:include="include::fgHeader"></head>
</head>
<body>

    <div th:include="include::fgNav"></div>

    <div class="container">
        <label for="query">账号</label>
        <input id="query"/>
        <label for="startTime">开始时间</label>
        <input type="text" id="startTime">
        <label for="endTime">结束时间</label>
        <input type="text"  id="endTime">
        <button id="btn">搜索</button>
        <table id="usertable"></table>
    </div>

    <div th:include="include::fgFooter"></div>

    <div th:include="include::fgScript"></div>
    <script>
        $(function () {
            $("#startTime").datetimepicker({
                language: 'zh-CN',
                minView: "month",
                format : "yyyy-mm-dd",
                autoclose:true,
                todayBtn: true,
                orientation:'bottom'
            });
            $("#endTime").datetimepicker({
                language: 'zh-CN',
                minView: "month",
                format : "yyyy-mm-dd",
                autoclose:true,
                todayBtn: true,
                orientation:'bottom'
            });
            $("#btn").bind("click",initTable);
        });

        function initTable() {
            $('#usertable').bootstrapTable('destroy');
            $('#usertable').bootstrapTable({
                method: 'GET',
                url: "/bootstrap/getData",
                striped: true, //是否显示行间隔色
                uniqueId:'id',
                dataField: "rows",
                contentType: "application/x-www-form-urlencoded",
                showFooter:true, // 展示底部
                pageNumber: 1, //初始化加载第一页，默认第一页
                pagination:true,//是否分页
                sidePagination:'server',//指定服务器端分页
                pageSize:5,
                pageList:[5,10,30,50,100],//分页步进值
                showPaginationSwitch:false, // 分页开关
                smartDisplay:true,
                showToggle:true, // 切换
                showRefresh:true, // 显示刷新
                showFullscreen:true, // 全屏
                cache: false,
                showColumns: true,    // 展示所有列
                minimumCountColumns: 1,  //最少允许的列数
                clickSelect: false,

                filterControl:true,
                filterShowClear:true,

                queryParamsType:'',
                queryParams:function queryParams(params) {
                    var startTime = $("#startTime").val();
                    var endTime =   $("#endTime").val();
                    var param = {
                        pageSize: params.pageSize,
                        pageNum: params.pageNumber,
                        sortName: params.sortName,
                        sortOrder:params.sortOrder,
                        query:$("#query").val(),
                        startTime:startTime,
                        endTime:endTime
                    };
                    return param;
                },
                 columns:[{
                    field : 'time',
                    title : '统计时间',
                    align : 'left',
                    footerFormatter: function (value) {
                        return "总计"
                    }
                },{
                    field : 'account',
                    title : '账号'
                },{
                    field : 'name',
                    title : '姓名',
                    sortable : true,
                },{
                    field : 'age',
                    title : '年龄',
                    sortable : true,
                    footerFormatter: function (value) {
                        var count = 0;
                        if (value.length > 0) {
                            for(var index in value) {
                                count += value[index].age;
                            }
                            return count;
                        }
                    }
                }],
                footerStyle: function footerStyle(column) {
                    return {
                        css: { 'font-weight': 'normal' },
                        classes: 'my-class'
                    }
                },
                // 详情视图
                detailView:false,
                detailFormatter: function(index, row, element) {
                    return row.id + ">>" + row.name;
                },
                cardView: false, //是否显示详细视图
                toolbar: '#toolbar', // 开启工具栏
                sortable:true, // 启动排序
                sortName:'id',
                sortOrder:"asc",
                search: false, // 显示搜索表格
                searchText:"", // 搜索提示
                trimOnSearch:true,
            });
        }
    </script>
</body>
</html>